<template>
    <div class="main-box">
        <div class="title">菜单管理</div>
        <div class="operation">
            <div class="menu-operation">
                <div class="left-bar">
                    <el-button type="primary" @click="showMenuDialog(optTypeOptions.addMenu)">
                        <i class="iconfont icon-jiahao"></i>
                        <span>新增菜单</span>
                    </el-button>
                    <el-button type="danger" @click="queding">
                        <i class="iconfont icon-jiahao"></i>
                        <span>批量删除</span>
                    </el-button>
                </div>
                <div style="margin-left: auto;">
                    <el-form ref="queryFormRef" :model="queryData.data" inline>
                        <el-form-item style="margin-right: 1em;" prop="title">
                            <el-input v-model="queryData.title" clearable style="width: 200px;" placeholder="请输入菜单名称">
                                <template v-slot:prefix>
                                    <i class="iconfont icon-sousuo"></i>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="queryMenuTree" type="primary"><i class="iconfont icon-sousuo"
                                    style="margin-right: 5px;"></i>搜索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="table-box" style="height:calc(100% - 115px);">
            <el-table  v-loading="tableLoading" default-expand-all row-key="id" :data="tableData" border height="100%">

                <el-table-column prop="title" label="菜单标题" align="left" width="180"></el-table-column>

                <el-table-column label="菜单类型" align="center">
                    <template #default="scope">
                        <i v-if="scope.row.menuType == 1" class="iconfont icon-wenjianjia fs-20"></i>
                        <i v-else-if="scope.row.menuType == 2" class="iconfont icon-caidan fs-20"></i>
                        <i v-else-if="scope.row.menuType == 3" class="iconfont icon-anniu2 fs-20"></i>
                    </template>
                </el-table-column>

                <el-table-column label="图标" align="center">
                    <template #default="scope">
                        <i :class="[scope.row.icon, 'fs-20']"></i>
                    </template>
                </el-table-column>

                <el-table-column label="唯一标识" width="160" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.menuType != 3">{{ scope.row.name }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="权限标识" width="160" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.perm" effect="plain" type="success">{{ scope.row.perm }}</el-tag>
                    </template>
                </el-table-column>


                <el-table-column label="是否显示" width="130" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isHide" :active-value="0" :inactive-value="1"
                            @change="handleHideChange(scope.row)" active-color="#13ce66" inactive-color="#eaecf0">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" width="300">
                    <template #default="scope">
                        <el-button v-if="scope.row.menuType != 3"
                            @click="showMenuDialog(scope.row.menuType == 1 ? optTypeOptions.addSubMenuForDirenu : optTypeOptions.addSubMenuForMenu, scope.row)"
                            type="primary" link size="small">
                            <i class="iconfont icon-jiahao mr5"></i>
                            新增子菜单
                        </el-button>
                        <el-button type="primary" @click="showMenuDialog(optTypeOptions.updateMenu, scope.row)" link
                            size="small">
                            <i class="iconfont icon-bianji ml5"></i>
                            更新菜单
                        </el-button>
                        <el-popconfirm width="170" 
                            @confirm="delMenu(scope.row.id)"
                            confirm-button-text="确定" cancel-button-text="取消" title="确认删除此菜单吗?">
                            <template #reference>
                                <el-button v-if="!scope.row.children || scope.row.children.length == 0"
                                    type="primary" link size="small">
                                    <i class="iconfont icon-lajixiang mr5"></i>
                                    删除
                                </el-button>
                            </template>
                        </el-popconfirm>

                    </template>
                </el-table-column>

            </el-table>
        </div>

        <el-dialog v-model="menuDialogVisible" :title="menuDialogTitle" :close-on-click-modal="false" width="500px">
            <el-form :model="menuDialogForm" :rules="menuRules" ref="menuDialogFormRef" size="default">
                <el-form-item label="菜单类型" prop="menuType" label-width="80px">
                    <el-radio-group v-model="menuDialogForm.menuType">
                        <el-radio border :label="menuTypeOption.menuType" v-for="menuTypeOption in filteredMenuTypeOptions"
                            :key="menuTypeOption.menuType">{{ menuTypeOption.menuTypeName }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单标题" prop="title" label-width="80px">
                    <el-input v-model="menuDialogForm.title"></el-input>
                </el-form-item>
                <el-form-item v-if="menuDialogForm.menuType != 3" label="唯一标识" prop="name" label-width="80px">
                    <el-input v-model="menuDialogForm.name"></el-input>
                </el-form-item>
                <el-form-item v-if="menuDialogForm.menuType != 3" label="菜单图标" prop="icon" label-width="80px">
                    <el-input v-model="menuDialogForm.icon"></el-input>
                </el-form-item>
                <el-form-item v-if="menuDialogForm.menuType == 2" label="组件路径" prop="componentPath" label-width="80px">
                    <el-input v-model="menuDialogForm.componentPath"></el-input>
                </el-form-item>
                <el-form-item v-if="menuDialogForm.menuType != 3" label="访问路径" prop="accessPath" label-width="80px">
                    <el-input v-model="menuDialogForm.accessPath"></el-input>
                </el-form-item>
                <el-form-item v-if="menuDialogForm.menuType != 1" label="权限字符" prop="perm" label-width="80px">
                    <el-input v-model="menuDialogForm.perm"></el-input>
                </el-form-item>
                <el-form-item label="排序值" prop="orders" label-width="80px">
                    <el-input-number v-model="menuDialogForm.orders"></el-input-number>
                </el-form-item>
                <el-form-item label="是否显示" prop="isHide" label-width="80px">
                    <el-switch v-model="menuDialogForm.isHide" :active-value="0" :inactive-value="1" active-color="#13ce66"
                        inactive-color="#eaecf0">
                    </el-switch>
                    {{ menuDialogForm.isHide }}
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="menuDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveMenu">确定</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>
<script>
export default {
    name: 'menu'
}
</script>
<script setup>
import Pagination from '@/components/Pagination.vue'
import { getMenuTree, saveMenu as saveMenuApi, updateMenu as updateMenuApi, delMenu as delMenuApi } from '@/api/menuApi'
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import Messager from '@/utils/messager'
import MsgBoxer from '@/utils/msgBoxer'

// 表格 数据
let tableData = ref([])
const queryData = reactive({
    title: ''
})
let tableLoading = ref(true)

// 获取角色数据
function queryMenuTree() {
    tableLoading.value = true
    getMenuTree(queryData).then(res => {
        tableLoading.value = false
        tableData.value = res
    })
}

onMounted(() => {
    queryMenuTree()
})


// 菜单表单
const menuDialogFormRef = ref(null)
const menuDialogVisible = ref(false)
const menuDialogTitle = ref('新增菜单')

const menuDialogForm = ref({
    menuType: 1,
    isDisabled: 0,
    orders: 1
})
const menuRules = {
    title: [
        { required: true, message: '菜单标题不能为空', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '唯一标识不能为空', trigger: 'blur' }
    ],
    componentPath: [
        { required: true, message: '组件路径不能为空', trigger: 'blur' }
    ],
    accessPath: [
        { required: true, message: '访问路径不能为空', trigger: 'blur' }
    ]
}

// 定义菜单类型, 只有下面3种
const menuTypeOptions = [
    {
        menuTypeName: '目录',
        menuType: 1
    },
    {
        menuTypeName: '菜单',
        menuType: 2
    },
    {
        menuTypeName: '按钮',
        menuType: 3
    },
]

// 根据点击的不同位置, 作区分
const optTypeOptions = {
    addMenu: { name: 'addMenu', title: '新增菜单' },
    addSubMenuForDirenu: { name: 'addSubMenuForDir', title: '新增子菜单' },
    addSubMenuForMenu: { name: 'addSubMenuForMenu', title: '新增子菜单' },
    updateMenu: { name: 'updateMenu', title: '更新菜单' },
}
// 默认点击的位置是 ‘新增菜单’
const optTyping = ref('addMenu')

// 根据点击的不同位置, 显示菜单类型选项
let filteredMenuTypeOptions = computed({
    get() {
        console.log('computed..');

        if (optTyping.value == 'addMenu') { // 如果点击的是新增菜单, 那么 可以添加 目录、菜单
            return menuTypeOptions.filter(m => m.menuType != 3)
        } else if (optTyping.value == 'addSubMenuForDir') { // 如果点击的是给目录 新增子菜单, 那么 可以添加 目录、菜单
            return menuTypeOptions.filter(m => m.menuType != 3)
        } else if (optTyping.value == 'addSubMenuForMenu') { // 如果点击的是给菜单 新增子菜单, 那么 可以添加 按钮
            return menuTypeOptions.filter(m => m.menuType == 3)
        } else if (optTyping.value == 'updateMenu') { // 如果点击的是更新菜单, 原菜单类型（不能修改菜单类型）
            return menuTypeOptions.filter(m => m.menuType == menuDialogForm.value.menuType)
        }
    }
})

// 显示 角色表单 弹框
function showMenuDialog(optType, menuData) {
    
    menuDialogFormRef.value && menuDialogFormRef.value.resetFields()
    
    if (optType.name == 'addMenu') {
        console.log('addMenu');
        menuDialogForm.value = { menuType: 1, isDisabled: 0, orders: 1, isHide: 0, parentId: 0 }
        menuDialogTitle.value = '新增菜单'
    } else if (optType.name == 'addSubMenuForMenu' || optType.name == 'addSubMenuForDir') {
        console.log('addSubMenu');
        // 如果 点击的是 目录, 可以选目录或菜单(默认选择菜单)
        // 如果 点击的是 菜单, 只能选择按钮
        menuDialogForm.value = { menuType: menuData.menuType == 1 ? 2 : 3, isDisabled: 0, orders: 1, isHide: 0, parentId: menuData.id }
        menuDialogTitle.value = '新增子菜单'

    } else if (optType.name == 'updateMenu') {
        console.log('updateMenu');
        menuDialogForm.value = JSON.parse(JSON.stringify(menuData))
        menuDialogTitle.value = '更新菜单'

    }
    optTyping.value = optType.name
    
    menuDialogVisible.value = true

}

// 保存菜单
function saveMenu() {
    menuDialogFormRef.value.validate((valid) => {

        if (!valid) {
            Messager.error('校验错误')
            return
        }


        const { id, parentId, menuType, title,
            name, icon, orders, isHide,
            componentPath, accessPath, perm, disabled } = menuDialogForm.value

        let data;
        console.log('optTyping.value',optTyping.value, menuDialogForm.value);

        // 根据不同的操作类型, 获取对应的数据
        if (optTyping.value === 'addMenu') {
            // 添加菜单
            if (menuType === 1) {
                data = { menuType, title, name, icon, orders, isHide,parentId:0 }
            } else if (menuType === 2) {
                data = { menuType, title, name, icon, orders, isHide, componentPath, accessPath, perm, parentId:0 }
            }
            saveMenuApi(data).then(res => {
                Messager.ok('保存成功')
                menuDialogVisible.value = false
                queryMenuTree()
            })
        } else if (optTyping.value === 'addSubMenuForDir' || optTyping.value === 'addSubMenuForMenu') {
            // 给目录添加子菜单（可以添加目录或菜单）
            // 给菜单添加子菜单（只能添加按钮）  
            if (menuType === 1) {
                data = { menuType, title, name, icon, orders, isHide, parentId }
            } else if (menuType === 2) {
                data = { menuType, title, name, icon, orders, isHide, componentPath, accessPath, perm, parentId }
            } else if(menuType === 3) {
                data = { menuType, title, name, icon, orders, isHide, perm, parentId }
            }
            saveMenuApi(data).then(res => {
                Messager.ok('保存成功')
                menuDialogVisible.value = false
                queryMenuTree()
            })
        } else if (optTyping.value === 'updateMenu') {
            // 更新菜单
            data = menuDialogForm.value
            updateMenuApi(data).then(res => {
                Messager.ok('更新成功')
                menuDialogVisible.value = false
                queryMenuTree()
            })
        }
    })
}

// 删除菜单
function delMenu(menuId) {

    delMenuApi({ menuId }).then(res => {
        Messager.ok('删除成功')
        queryMenuTree()
    })

}
</script>

<style lang="scss" scoped>
.fs-20 {
    font-size: 20px !important;
}

.menu-operation {
    display: flex;
}

::v-deep i.iconfont {
    margin-right: 2px;
    font-size: 16px;
}

.el-form--inline .el-form-item {
    margin-right: 0;
}



a.site-link {
    color: #409eff;
}

::v-deep .el-form-item-time .el-form-item__content {
    flex-wrap: nowrap;
}

.table-box i.iconfont {
    font-size: 14px;
}

::v-deep textarea {
    resize: none;
}

.cell {
    white-space: nowrap;
}
</style>
